<style lang="less" scoped>
  .login-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../assets/images/bg.jpg");
    background-size: 100% 100%;
    .login-container {
      background-color: white;
      width: 600px;
      box-sizing: border-box;
      .el-form-item {
        width: 490px;
        margin: 45px auto;
        .el-switch {
          margin: 0 10px 0 10px;
        }
      }
      .login-switch {
        margin: -25px auto;
      }
    }
  }
</style>

<template>
  <el-form :model="formData" ref="login" :rules="rules" class="login-page" label-width="100px">
    <div class="login-container">
      <el-form-item label="账号" prop="user">
        <el-input v-model="formData.user" auto-complete="off" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="formData.pass" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="login-switch">
        <el-radio-group size="small" v-model="formData.radio">
          <el-radio label="1" border size="small">管理员</el-radio>
          <el-radio label="2" border size="small">用户</el-radio>
          <el-radio label="3" border size="small">老司机</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button round type="primary" @click="submitForm" style="width: 100%; font-size: 20px; word-spacing: 50px">
          登 录
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
  import axios from 'axios'
  import router from '../router'
  import store from '../store/store'
  // import {mapState} from 'vuex'
  console.log('111 ' + store.state.radio)
  
  export default {
    name: 'Test',
    data () {
      return {
        formData: {
          user: '',
          pass: '',
          radio: '2'
        },
        rules: {
          user: [
            {required: true, message: '账号不能为空', trigger: 'change,blur'}
          ],
          pass: [
            {required: true, message: '密码不能为空', trigger: 'change,blur'}
          ]
        }
      }
    },
    methods: {
      submitForm () {
        var that = this
        this.$refs.login.validate((valid) => {
          console.log(this.formData)
          if (valid) {
            axios({
              method: 'post',
              url: '/login',
              data: {
                username: this.formData.user,
                password: this.formData.pass,
                radiovalue: this.formData.radio
              }
            })
            .then(function (response) {
              console.log(response.data)
              if (response.data.username !== that.formData.user) {
                that.$message.error('账号输入错误')
                return false
              }
              if (response.data.password !== that.formData.pass) {
                that.$message.error('密码输入错误')
                return false
              }
              if (response.data.radio !== that.formData.radio) {
                that.$message.error('账号类型不匹配')
                return false
              }
              that.$message.success('登录成功')
              // that.$store.commit('change', that.formData.radio)
              that.$store.dispatch('change', that.formData.radio)
              router.push({path: '/side'})
            })
            // .catch(function (error) {
            //   that.$message.error('捕获异常')
            // })
          } else {
            this.$message.error('请填写账号密码')
            return false
          }
        })
      }
    }
  }
  // axios.post('../api/login', {
  //   uesrname: this.formData.user,
  //   password: this.formData.pass
  // }).then(function (response) {
  //   console.log(response)
  // }).catch(function (error) {
  //   console.log(error)
  // })
  //
  // axios.get('/data').then((res) => {
  //   var result = res.data
  //   console.log(result)
  // })
  //
</script>
